<template>
	<!-- 搜索栏 -->
	<view class="index-navibar">
		<view class="index-search" @click="click">
			<!-- <image src="../../static/top/search.png"></image> -->
				<icon type="search" size="20"></icon>
				<span>请输入书名/作者</span>
			<!-- <input type="text" placeholder="请输入 书名/作者" /> -->
			<!-- <button class="filter" type="primary" plain="true">请输入 书名/作者</button> -->
		</view>
		<button style="color: black; border: 0;" class="filter" type="primary" plain="true"
    @click="classification">
			<span>分类</span>
			<image src="../../static/top/classify.png"></image>
		</button>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"search",
		data() {
			return {
				
			};
		},
		methods:{
			click(){
				uni.navigateTo({
					url: '../../pages/search/search'
				})
			},
      classification(){
        uni.navigateTo({
          url:'../../pages/classification/classification'
        })
      }
		}
	}
</script>

<style lang="scss">
	.index-navibar{
		color: black;
		display: flex;
		background-color: rgba(0,0,0,0.1);
		.index-search{
			flex: 1;
			background-color: white;
			border-radius: 20px;
			margin: 10px 5px;
			padding: 10px;
			text-align: center;
			float: left;
			icon{
				width: 20px;
				height: 20px;
				color: black;
				float:left
			}
		}
		button{
			color: black;
		}
		.filter{
			padding: 1px;
			width: 60px;
			height:40px;
			float: left;
			margin-top: 10px;
			margin-right: px;
			border-radius: 15px;
			span{
				float: left;
				font-size: 13px;
				line-height: 40px;
			}
			image{
				float: left;
				width: 15px;
				height: 15px;
				margin-top: 11px;
				margin-left: 3px;
			}
		}
		
	}
</style>
